<template>
  <!-- 白名单 -->
  <div>
    <el-dialog
      class="dia-style"
      title="白名单"
      :visible.sync="open"

      :close-on-click-modal="false"
      @close="cancel"
    >
      <HkTransfer
        ref="hk_transfer"
        :table-list="tableList"
        :table-data="tableData"
        :total="total"
        :query-params="queryParams"
        @changePage="getList"
      />

      <div slot="footer" class="dialog-footer">
        <!-- 标签选择页 -->
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import HkTransfer from '@/components/Common/Hk-Transfer/index.vue'
import { getHostInfoPage, addWhite } from '@/api/icp/labelClassDisplay'
export default {
  components: { HkTransfer },
  props: {
    transferId: {
      type: String,
      default() {
        return ''
      }
    },
    metricsCode: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      open: false,
      queryParams: {
        size: 10,
        current: 1
      },
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      //  表格
      tableList: [
        { label: 'IP', param: 'ip' },
        { label: 'MAC', param: 'mac' },
        { label: '主机类型', param: 'hostType', type: 'slot' },
        { label: '责任人名', param: 'username' },
        { label: '组织机构名称', param: 'deptName' }
      ]
    }
  },
  mounted() {},
  methods: {
    getList(val) {
      this.queryParams = {
        ...this.queryParams,
        ...val,
        ruleId: this.transferId
      }
      return new Promise((resolve, reject) => {
        getHostInfoPage(this.queryParams).then((res) => {
          this.tableData = res.list
          this.total = res.total
          this.loading = false
          resolve(this.tableData)
        })
      })
    },
    // 网页
    show() {
      this.getList().then((res) => {
        this.open = true
      })
    },
    // 关闭弹窗
    cancel() {
      this.open = false
      this.$refs.hk_transfer.selectedStaffList = []
    },
    // 保存弹窗
    async confirm() {
      // this.open = false;
      const res = await this.$refs.hk_transfer.submitData()
      const whiteList = res.map((item) => {
        return {
          type: item.hostType,
          uniqueValue: item.id,
          ip: item.ip
        }
      })
      const newObj = {
        ruleId: this.transferId,
        whiteList: JSON.stringify(whiteList),
        metricsCode: this.metricsCode
      }

      addWhite(newObj).then((res) => {
        this.$message.success('新增数据插入成功')
        this.$refs.hk_transfer.selectedStaffList = []
        this.open = false
        this.$emit('handleSave')
      })
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog {
    width: 1100px;
    .el-dialog__body {
      //max-height: 500px;
      display: flex;
      flex-direction: column;
    }
  }
}
.full {
  font-size: 14px;
  width: 100%;
  height: 500px;
  display: flex;
  .left {
    width: 188px;
    height: 100%;
    margin-right: 20px;
    .left-son {
      display: flex;
      padding: 10px 20px;
      align-items: center;
      width: 100%;
      height: 72px;
      //background: #e4eeff;
      border: 1px solid #2979ff;
      border-radius: 4px;
      position: relative;
      .right-box {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .num {
          color: #2979ff;
          margin-left: 10px;
        }
      }
    }
  }
  .right {
    flex: 1;
  }
}
</style>
